<template>
	<view>
		<view>
			<view v-for="(item, index) in appointmentList" :key="item.id" class="order-list card">
				<view class="card-top" @click="onStore(item.storeId)">
					<view class="card-top-left">
						<view class="card-top-left-logo1 flex flex-ai-c">
							<i-icon icon="icondianpu" type="single" size="40rpx" color="rgb(255,225,60)"></i-icon>
						</view>
						<view class="card-top-left-title">{{ item.storeName }}</view>
						<view class="card-top-left-logo2 flex flex-ai-c">
							<i-icon icon="iconbao_1" type="single" size="32rpx" color="rgb(251,176,0)"></i-icon>
						</view>
						<view style="margin-left: 20rpx;">
							<u-icon name="arrow-right" color="#999999"></u-icon>
						</view>
					</view>
					<view class="card-top-right">{{ item.status }}</view>
				</view>
	
	
				<view @click="toYyDetailPage(item, item.id)">
					<!-- 车型： -->
					<view class="card-middle">
						<view class="card-middle-content flex flex-ai-fs">
							<view class="card-middle-content__img flex flex-ai-c width">
								<image style="width: 36rpx;height: 36rpx;" :src="item.brandUrl" mode="aspectFit"></image>
								<view style="font-size: 28rpx;letter-spacing: 0rpx;">车型：</view>
							</view>
							<view class="card-middle-content__title flex">{{ item.carName }}</view>
						</view>
					</view>
	
					<!-- 外观 -->
					<view v-if="JSON.parse(item.color).outerColour.colorCoding && JSON.parse(item.color).inColour.colorCoding !== ''">
						<view class="title flex flex-ai-c">
							<view class="width">外观内饰：</view>
							<view class="flex flex-ai-c colorList">
								<view class="flex flex-ai-c flex-wrap-w">
									<view class="color" :style="{ background: JSON.parse(item.color).outerColour.colorCoding }"></view>
									<view>外观+内饰</view>
									<view class="colorCoding flex" v-if="JSON.parse(item.color).inColour.colorCoding.split('/').length <= 2">
										<view class="color" style="margin-left: 10rpx;" :style="{ background: JSON.parse(item.color).inColour.colorCoding.split('/')[0] }"></view>
										<!-- <view class="color" :style="{ background: JSON.parse(item.color).inColour.colorCoding.split('/')[1] }"></view> -->
									</view>
									<view v-else>
										<view class="color" :style="{ background: JSON.parse(item.color).inColour.colorCoding.split('/')[0] }"></view>
									</view>
								</view>
							</view>
						</view>
					</view>
	
					<!-- 指导价 -->
					<view class="flex" style="margin: 20rpx 0 20rpx 0;">
						<view class="title flex">
							<view class="width"><text style="letter-spacing:13rpx;">指导</text>价：</view>
							<view style="font-size: 26rpx;">
								<view>{{ item.factoryPrice }}</view>
							</view>
						</view>
	
					</view>
	
					<!-- 到店时间 -->
					<view class="flex" style="margin-top: 20rpx 0;padding-bottom: 20rpx;">
						<view class="title flex flex flex-ai-c">
							<view class="width">
								<view>到店时间：</view>
							</view>
							<view class="flex flex-jc-sa" style="font-size: 26rpx;">
								<view>{{ item.bookTime }}</view>
							</view>
						</view>
	
					</view>
				</view>
	
	
				<!-- btn -->
				<view class="card-bottom" v-if="item.status === '待到店' || item.status === '已到店'">
					<view class="flex flex-ai-c" v-if="item.status === '待到店'">
						<!-- 联系 -->
						<view @click='contact3(item)'>
							<i-icon icon="iconxiaoxi" type="single" size="32rpx" color="#666666" style="margin-right:40rpx;"></i-icon>
						</view>
	
						<!-- 电话 -->
						<view @click='phone(item.storePhone)'>
							<i-icon icon="icondianhua" type="single" size="28rpx" color="#666666"></i-icon>
						</view>
	
					</view>
					<view class="card-bottom-operate" v-if="item.status === '待到店'">
						<view class="card-bottom-operate__btn" style="background-color: #fff;border: 2rpx solid #C9C9C9;" @click="cancel(item.id)"><text>{{cancelText}}</text></view>
					</view>
	
					<view class="card-bottom-operate" v-if="item.status === '已到店'">
						<view class="card-bottom-operate__btn" @click="contact3(item)">
							<i-icon icon="iconxiaoxi" type="single" size="32rpx"></i-icon>
							<text>在线咨询</text>
						</view>
						<view class="card-bottom-operate__btn" @click="phone(item.storePhone)">
							<i-icon icon="icondianhua" type="single" size="28rpx"></i-icon>
							<text>致电门店</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import timLogin from '@/utils/timLogin.js' // 导入tim 登录
	export default {
		name:'appointmentList',
		props:{
			appointmentList:{
				type:Array,
				default:()=>[]
			}
		},
		data(){
			return {
				cancelText: '取消预约',
			}
		},
		methods:{
			cancel(id){
				this.$emit('cancel',id)
			},
			// 拨打电话
			phone(num) {
			  console.log(num)
			  uni.makePhoneCall({
			    phoneNumber: num
			  })
			},
			//预约详情
			toYyDetailPage(item, id) {
			  uni.navigateTo({
			    url: '/pages_order/makeAppointment/makeAppointment?bookid=' + id + '&price=' + item.factoryPrice
			  })
			},
			//店铺详情
			onStore(id) {
				uni.navigateTo({
					url: '/pages_store/newCarStore/index/index?storeid=' + id
				})
			},
			// 预约
			getCont3(getList){
			  console.log(getList)
			  this.$store.commit('news/createConversationActive', {
				  user: getList.storeName, //店铺名称
				  img: getList.storeImg, //店铺头像
				  lastTime: '', //
				  userId: getList.storeId, //店铺id
				  conversationID: 'C2C',
			  })
			  this.$store.commit('news/setCardInfo', {
				  imgSrc: getList.brandUrl,
				  name: getList.carName,
				  price: getList.factoryPrice,
				  type: 'resaleCar',
			    goPage: '1'
			  })
				uni.hideLoading()
			  uni.navigateTo({
				  url: '/pages_common/contactSeller/contactSeller?user=' + getList.storeName + '&pageId=' + getList.id+ '&tab=0'
			    // '/pages_common/contactSeller/contactSeller?user=' + types.storeName + '&pageId=' + this.bookid+ '&tab=0'
			  })
			},
			contact3(getList) {
				uni.showLoading()
			  if (this.$store.state.isSDKReady) {
					this.$u.debounce(this.getCont3(getList), 2000)
			  } else {
				  timLogin(() => {
			      this.$u.debounce(this.getCont3(getList), 2000)
				  })
			  }
			},
		}
	}
</script>

<style lang="scss">
	@import '../buy_order.scss';
</style>
